/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-05 15:30:33
 * @filename : common/slider.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    Animated,
    StatusBar,
    ScrollView
} from 'react-native';

let { width, height } = Utils.size;
import NetWorkImg from '../common/networkImg'

class Slider extends Component {

    constructor(props) {
        super(props);
        this.state = {
            animatedValue: new Animated.Value(0),
            index : this.props.index,
            arr : this.props.arr,
        }
    }

    componentDidMount() {
        this._scrollView && this._scrollView.scrollTo({
            x: this.props.index * width,
            y: 0,
            animated: false,
        });
        let that = this;
        setTimeout(function(){
           SceneObj['NavBar'].refs['navBar'].setNativeProps({style:{height:0,opacity :0}});   
           that.state.animatedValue.setValue(0);
           that.animationFunc(that.state.animatedValue,1);
        },100);
    }

    animationFunc(start,end,time=200,callback) {
        Animated.timing(this.state.animatedValue, {
          toValue: end,
          duration: time,
        }).start(()=>{ if(callback){callback()}});
    }

    closeSlider() {
        let callback = () => {
            this.props.callbackParent();
            this.state.animatedValue.setValue(0);
            this.animationFunc(this.state.animatedValue,1);
        }
        StatusBar.setHidden(false);
        SceneObj['NavBar'].refs['navBar'].setNativeProps({style:{height:60,opacity :1}});
        this.state.animatedValue.setValue(1);
        this.animationFunc(this.state.animatedValue,0,150,callback);
    }

    sliderPage() {
        let items = [],arr = this.state.arr;

        for (var i in arr) {
            items.push(
                <SliderPage key = {i}
                    closeSlider = {this.closeSlider.bind(this)} 
                    source={arr[i].picture}
                />
            )
        }
        return items;
    }

    onScroll(e) {
        let pageNum = e.nativeEvent.contentOffset.x/width;
        if (parseInt(pageNum) === pageNum) {
            this.setState({index:pageNum})
        }
    }

    render() {

        let touchPoint = this.props.touchPoint;
        let items = this.sliderPage();
        let animatedStyle = [styles.container, {
            opacity:this.state.animatedValue,
            left: this.state.animatedValue.interpolate({inputRange: [0, 1], outputRange: [touchPoint.x, 0]}),
            top: this.state.animatedValue.interpolate({inputRange: [0, 1], outputRange: [touchPoint.y,-60]}),
            width: this.state.animatedValue.interpolate({inputRange: [0, 1], outputRange: [touchPoint.width, width]}),
            height: this.state.animatedValue.interpolate({inputRange: [0, 1], outputRange: [touchPoint.height, height]}),
        }];

        return (
             <Animated.View style={animatedStyle}>  
                <View style={styles.head}>
                    <Text style={styles.num}>{(this.state.index+1)+"/"+this.state.arr.length}</Text>
                </View>

                <View style={styles.body}>
                    <ScrollView
                        ref={(component) => {this._scrollView = component}}
                        pagingEnabled={true}
                        scrollEventThrottle={1}
                        horizontal={true}
                        onScroll={(e)=>this.onScroll(e)}
                    >
                    {items}
                    </ScrollView>
                </View>

                <View style={styles.foot}>
                </View>
             </Animated.View>
        );
    }
}

class SliderPage extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {

        return (
            <TouchableOpacity onPress={()=>this.props.closeSlider()}  activeOpacity={1}>
                <View style={styles.sliderPage}>
                    <NetWorkImg
                        source={{uri:this.props.source}} 
                        style={styles.img}
                        loadSize={'large'}
                        imgSize={true}
                        boxHeight={height-120}
                    />
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({

    container: {
        width:width,
        height:height,
        position:'absolute',
        top:-60,
        left:0,
        right:0,
        bottom:0,
        flexDirection: 'column',
        overflow:'hidden'
    },

    head: {
        height:60,
        paddingTop:20,
        alignItems: 'flex-end',
        justifyContent: 'center',
        backgroundColor:'#000',
    },

    body: {
        flex: 1,
        flexDirection: 'row',
        overflow:'hidden',
        backgroundColor:'#000',
    },

    foot: {
        height:60,
        backgroundColor:'#000',
        width:width,
        position:'absolute',
        bottom:0,
    },

    num: {
        width:50,
        fontSize:14,
        color:'#fff'
    },

    sliderPage: {
        flex: 1,
        height:height-120,
        width:width,
        alignItems: 'center',
        justifyContent: 'center',    
    },

    img: {
   
    }

});

export default Slider;
